<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="base" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>设备分类</title>
  <link href="${base}/assets/css/public.css" rel="stylesheet">
  <script src="${base}/assets/js/jquery.min.js"></script>
 <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style:none;
        }
        a{
            text-decoration:none;color:#000;
        }
        i{
            font-style: normal;
        }
        #tree li{
            position:relative;
            padding-left:70px;
            line-height: 50px;
            font-size: 24px;
            color: #000;
        }
        #tree li a{
            position:relative;
            left: -14px;
            display: inline-block;
            height: 50px;
            max-width: 320px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #tree li .btn{
            position: absolute;
            right:50px;
            top:10px;
            min-width: 284px;
        }
        #tree li .btn button{
            display: block;
            float: left;
            width: 78px;
            height: 25px;
            margin-right: 15px;
            font-size: 16px;
            line-height: 25px;
            color: #525e70;
            text-align: center;
            border: 1px solid #bbb;
            border-radius: 5px;
            background-color: #fff;
        }
        #tree li span{
            position:absolute;
            left:-35px;
            top:6px;
            display:block;
            width:90px;
            height:40px;
            background-image: url("${base}/assets/img/icon.png");
            background-repeat: no-repeat;
            background-position: 0 0;
            box-sizing: border-box;
        }
        #tree li .open{
            height: 100%;
            background-position: -242px 5px;
        }
        #tree li .close{
            height: 40px;
            background-position: -101px 5px;
        }
        #tree li .file{
            height: 40px;
            background-position: -347px 5px;
        }
        #tree{
            display:block;
            width:800px;
            margin:50px auto;
        }
        #tree ul{
            display:none;
        }
        .box{
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 10;
            display: none;
            width: 410px;
            height: 300px;
            padding: 5px 24px 0 34px;
            margin: -150px 0 0 -205px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px #8b8b8b,0 0 10px #8b8b8b,0 0 10px #8b8b8b;
            box-sizing: border-box;
        }
        .box h3{
            height: 60px;
            line-height: 60px;
            font-size: 18px;
            font-weight: normal;
            color: #101010;
            text-align: center;
            border-bottom: 1px dotted #bbb;
        }
        .box form{
            padding-top: 60px; 
        }
        .box form p{
            padding-left: 5px;          
        }
        .box form p label{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
            color: #101010;
        }
        .box form p input[type="text"]{
            width: 200px;
            height: 30px;
            padding: 0 5px;
            line-height: 30px;
            font-size: 14px;
            color: #101010;
            border-radius: 5px;
            border: 1px solid #bbb;
            box-sizing: border-box;
        }
        .box input[type="submit"]{
            width: 78px;
            height: 30px;
            margin: 48px 15px 0 15px;
            line-height: 30px;
            font-size: 14px;
            color: #101010;
            border-radius: 5px;
            background-color: #fff;
            border: 1px solid #bbb;
            box-sizing: border-box;
        }
        .box i{
            position: absolute;
            right: 20px;
            top: 15px;
            display: block;
            width: 21px;
            height: 21px;
            line-height: 14px;
            font-size: 18px;
            font-weight: bold;
            color: #444;
            text-align: center;
            border-radius: 50%;
            border: 3px solid #444;
            box-sizing: border-box;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="top">
   <c:import url="../commons/top.jsp"/>
</div>
<div class="wrap">
  <div class="side">
   	<c:import url="../commons/sidebar.jsp"/>
  </div>
  <div class="cont">
    <div class="bread">
      <span>设备分类</span>
      <div class="clear"></div>
    </div>
    <!--此处放其他内容-->
	<div id="box" class="box">
		        <h3>添加分类</h3>
		      	<form action=""> 
		            <p>
		                <label for="name">分类名称：</label>
		                <input type="text" id="name" name="" placeholder="单行输入">
		            </p>
		        </form> 
		        <input id="save" type="submit" name="" value="保存" style="margin-left: 60px;">
		        <input id="cancel" type="submit" name="" value="取消">
		        <i id="close">×</i>
    	</div>
	    <div id="detele" class="box">
	        <h3>删除分类</h3>
	        <form action="">
	            <p id="deldesc" style="text-align: center;">
	                	您确认删除该分类吗？
	            </p>
	        </form>
	        <input id="deterDet" type="submit" name="" value="确定" style="margin-left: 60px;">
	        <input id="cancelDet" type="submit" name="" value="取消">
	        <i id="closeDet">×</i>
	    </div>
   
        <div class="portlet-body">

               <ul id="tree">
			    <li>
			        <a href="javascript:;" pid="-1" sid="0" cty="-1">设备分类</a> 
			       	<ul>
			         <c:forEach items="${catag}" var="cataf" varStatus="vs" >
			          	<c:if test="${cataf.ctype=='1'}">
			          		 <li>
			          		 	<a href="javascript:;" pid="${cataf.pid}" sid="${cataf.id}" cty="${cataf.ctype}">${cataf.name}</a> 
			          		 	<ul>
			          		 		<c:forEach items="${catag}" var="catas">
			          		 			<c:if test="${catas.ctype=='2' && catas.pid == cataf.id}">
			          		 				 <li>
			          		 					<a href="javascript:;" pid="${catas.pid}" sid="${catas.id}" cty="${catas.ctype}">${catas.name}</a>
			          		 					<ul>
			          		 						<c:forEach items="${catag}" var="catat">
			          		 							<c:if test="${catat.ctype=='3' && catat.pid == catas.id}">
			          		 								<li>
			                                        			<a href="javascript:;" pid="${catat.pid}" sid="${catat.id}" cty="${catat.ctype}">${catat.name}</a>
			                                    			</li>
			          		 							</c:if>
			          		 						</c:forEach>
			          		 					</ul>
			          		 				 </li>
			          		 			</c:if>
			          		 		</c:forEach>
			          		 	</ul>
			          		 </li>
			          	</c:if>    
			         </c:forEach>
			      	</ul>
			      	<span style="background-position: 51px 0;"></span>
		            <div class="btn">
		                <button id="frist">添加子类</button>
		            </div>
			    </li>    
			</ul> 

       </div>
</div>
  </div>
  <div class="clear"></div>
</div>
</body>
<script type="text/javascript">
 
  $(function() {
      var $tree=$("#tree");
      var $aLi=$tree.find("li");
      var $btnAll=$tree.find("button");
      $aLi.each(function(index, element) {
          //给自己加个状态
          $(element).attr("change",1);

          //判断自己下面有没有span
          if($(element).children('span').length==0){
              $(element).append("<span></span>");
          }
          // //判断自己下面有没有.btn
          // if($(element).children('.btn').length==0){
          //     $(element).append("<span></span>");
          // }
          //判断自己下面有没有ul，添加不同的class名
          if($(element).children('ul').length>0){
              $(element).children('span').addClass("close");
              if($(element).children('.btn').length==0){
                  $(element).append('<div class="btn"><button>添加子类</button><button>编辑</button><button>删除</button></div>');
                  var $aBtn=$(element).children(".btn").children('button');
                  //添加子类按钮
                  $aBtn.eq(0).click(function(){
                      addBtn($(element));
                  });
                  //编辑按钮
                  $aBtn.eq(1).click(function(){
                	  editBtn($(element));
                  });
                  //删除按钮
                  $aBtn.eq(2).click(function(){
                	  deteleBtn($(element));
                  });
              }
          }else{
              $(element).children('span').addClass("file");
              $(element).append('<div class="btn"><button>查看</button><button>编辑</button><button>删除</button></div>');
              var $aBtn=$(element).children(".btn").children('button');
              //查看按钮
              $aBtn.eq(0).click(function(){
            	  seeBtn($(element));
              });
              //编辑按钮
              $aBtn.eq(1).click(function(){
            	  editBtn($(element));
              });
              //删除按钮
              $aBtn.eq(2).click(function(){
            	  deteleBtn($(element));
              });
          }
          //点击事件
          $(element).parent("#tree").on("click","li",function(event) {
              event.stopPropagation();
              //console.log()
              //console.log($(event.target)[0].tagName);
              //阻止冒泡
              if($(event.target)[0].tagName=="LI"||$(event.target)[0].tagName=="UL"||$(event.target)[0].tagName=="DIV"||$(event.target)[0].tagName=="BUTTON"){
                  return;
              }
              //设置开关
              if($(this).attr("change")==1){
                  if($(this).children('ul')){
                      $(this).children('ul').show();
                      $(this).children("span").addClass('open').removeClass("close");
                      $(this).attr("change",0);
                      setSpanHeight();
                  }
              }else{
                  if($(this).children('ul')){
                      $(this).children('ul').hide();
                      $(this).children("span").addClass('close').removeClass("open");
                      $(this).attr("change",1);
                      
                  }else{
                      $(this).children("span").addClass('file');
                      $(this).attr("change",1);
                  }
                  setSpanHeight();
              }
          });
      });
      
      //设置span的高度
      function setSpanHeight(){
          var liAll=$tree.find("li");
          liAll.each(function(){
              if($(this).children("ul")){
                  if($(this).children("ul").children("li").length>0&&$(this).children("span").attr("class")!="close"){
                      var last=$(this).children("ul").children().length-1;
                      var height=$(this).height()-$(this).children("ul").children().eq(last).height()+20;
                      $(this).children('span').css("height",height+"px");
                  }else{
                      $(this).children('span').css("height",40+"px");
                  }
              }else{
                  $(this).children('span').css("height",40+"px");
              }
              //console.log($(this).children("span").height());
          });
      }
      var $box=$("#box");
      var $name=$("#name");
      var $save=$("#save");
      var $cancel=$("#cancel");
      var $close=$("#close");
      //添加函数
      $("#frist").click(function(){
    	   addBtn($($(this).parents().parents()));
      });
      function addBtn(obj){
          $box.show();
          //保存按钮
          $save.click(function(){
        	  var LA = obj.children('a');
              var pid=LA.attr("pid");//parentLi.getAttribute("pid");
              var sid=LA.attr("sid");//parentLi.getAttribute("sid");
              var cty=LA.attr("cty");//parentLi.getAttribute("cty");
              var txt=$name.val();
              $.ajax({
                  type: "POST",
                  dataType: "json", // 数据格式:JSON
                  url: '${base}/back/categadd.do',
                  data: {pid:pid,sid:sid,cname:txt,cty:cty},
                  success: function (data) {
	               	 if(data.ok == 'fal'){
	               		alert("添加失败!!")
	               	 }
               	   	 if(data.ok == 'ok'){
               	   		window.location.href="${base}/back/deviceflshow.do";
                     	setSpanHeight();
                     	$box.hide();
                     	$name.val("");
               	    }
                  }
              });
              //console.log(obj.parents("ul"));
              
          });
          //取消按钮
          $cancel.click(function(){
              $box.hide();
              $name.val("");
          });
          //关闭按钮
          $close.click(function(){
              $box.hide();
              $name.val("");
          });
      }
      //查看函数
      function seeBtn(obj){
    	  var LA = obj.children('a');
          var pid=LA.attr("pid");//parentLi.getAttribute("pid");
          var sid=LA.attr("sid");//parentLi.getAttribute("sid");
          var cty=LA.attr("cty");//parentLi.getAttribute("cty");
          var url = '${base}/back/devicelist.do?dcid='+sid;
          window.location.href=url;
      }
      //编辑函数
      function editBtn(obj){
          $box.show();
          $name.val(obj.children('a').html());
          //保存按钮
          $save.click(function(){
        	  var LA = obj.children('a');
              var pid=LA.attr("pid");//parentLi.getAttribute("pid");
              var sid=LA.attr("sid");//parentLi.getAttribute("sid");
              var cty=LA.attr("cty");//parentLi.getAttribute("cty");
              var txt=$name.val();
              $.ajax({
                  type: "POST",
                  dataType: "json", // 数据格式:JSON
                  url: '${base}/back/categmod.do',
                  data: {pid:pid,sid:sid,cname:txt,cty:cty},
                  success: function (data) {
	               	 if(data.ok == 'fal'){
	               		alert("添加失败!!")
	               	 }
               	   	 if(data.ok == 'ok'){
               	   		window.location.href="${base}/back/deviceflshow.do";
                     	setSpanHeight();
                     	$box.hide();
                     	$name.val("");
               	    }
                  }
              });
          });
          //取消按钮
          $cancel.click(function(){
              $box.hide();
              $name.val("");
          });
          //关闭按钮
          $close.click(function(){
              $box.hide();
              $name.val("");
          });
      }
      //删除函数
      var $oDetele=$("#detele");
      var $odeterDet=$("#deterDet");
      var $ocancelDet=$("#cancelDet");
      var $oCloseDet=$("#closeDet");
      var $deldesc=$("#deldesc");
      function deteleBtn(obj){
    	  var LA = obj.children('a');
    	  var pid=LA.attr("pid");//parentLi.getAttribute("pid");
          var sid=LA.attr("sid");//parentLi.getAttribute("sid");
          var cty=LA.attr("cty");//parentLi.getAttribute("cty");
          $oDetele.show();
          
          $.ajax({
              type: "POST",
              dataType: "json", // 数据格式:JSON
              url: '${base}/back/catacheckdel.do?pid='+pid+'&sid='+sid+'&cty='+cty,
             // data: postData,
              success: function (data) {

           	   if(data.fal == 'conut>0'){
           			$deldesc.html("分类下有未出库的设备，请先出库再删除分类！！");
           			/* $odeterDet.disabled=true; */
           			$odeterDet.attr("disabled",true); 
           	   }
           	   if(data.fal == 'sub>0'){
           			$deldesc.html("分类下有子类，请先删除子类！！！");
           			$odeterDet.attr("disabled",true); 
           	   }
           	   if(data.ok == 'ok'){
           			$deldesc.html("您确认删除该分类吗？");
           			$odeterDet.attr("disabled",false); 
           	   }
              }
          });
          
          //确定按钮
          $odeterDet.click(function(){
        	  $oDetele.hide();
 			// var parentLi=obj.parentNode.parentNode;             
             /*  var oA=parentLi.children[0];
              var pid=oA.getAttribute("pid"); */
              var url = '${base}/back/categdel.do?pid='+pid+'&sid='+sid+'&cty='+cty;
              window.location.href=url;
          });
          //取消按钮
          $ocancelDet.click(function(){
        	  $oDetele.hide();;
          });

          //关闭按钮
          $oCloseDet.click(function(){
        	  $oDetele.hide();
          });
      }
  });
</script>
</html>

		


